import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {View} from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { getHeadTop } from '../../utils/tools'
import './header-bar.scss'

const headTop = getHeadTop()

const MovieHeaderBar: React.FC<{title?: any;index?: number; color?: string;selectedColor?: string;backgroundColor?: string; onTabe?: any}> = (props) => {
    const [showBack, setShowBack] = useState(true)
    useEffect(() => {
        const pages = Taro.getCurrentPages();
        if(pages.length <= 1){
            setShowBack(false)
        }
    }, [])
    const handleOpen = (index)=>{
      if(index!=props.index){
        props.onTabe()
      }
    }
    return (
        <View className='headerBar' style={`top: ${(headTop && (headTop.statusBar + headTop.top)) || 0}px;background:${props.backgroundColor}`}>
          <View className='title-box'>
            {props.title.length>0 && props.title.map((item,index)=>
              <View onClick={handleOpen.bind(this,index)} className={index==props.index?"title selected":"title"} style={`color: ${props.color};`}>{item.name}</View>
            )}
          </View>
            {showBack && <View className='back' onClick={() => Taro.navigateBack()}><AtIcon value='chevron-left' size='20' color={props.color}></AtIcon></View>}
            {!showBack && <View className='home' onClick={() => Taro.switchTab({url: '/pages/index/index'})}><AtIcon prefixClass='xxhz' value='shouye' size='16' color='black'></AtIcon></View>}
        </View>
    )
}

MovieHeaderBar.defaultProps = {
    title: [{name:"电影",url:"/movie/Mlist"},{name:"影院",url:"/movie/Clist"}],
    color: 'white',
    index:0,
    selectedColor:'white'
}

export default MovieHeaderBar
